<template>
	<div class="timer">
		<div ref="startTimer">00:00:00</div>
	</div>
</template>

<script>
	module.exports = {
		props: {

		},
		data: function() {
			return {
				timer: "",
				content: "",
				hour: 0,
				minutes: 0,
				seconds: 0
			};
		},
		methods: {
			start() {
				this.timer = setInterval(this.startTimer, 1000);
			},
			startTimer() {
				this.seconds += 1;
				if (this.seconds >= 60) {
					this.seconds = 0;
					this.minute = this.minute + 1;
				}

				if (this.minute >= 60) {
					this.minute = 0;
					this.hour = this.hour + 1;
				}
				this.$refs.startTimer.innerHTML = (this.minutes < 10 ? '0' + this.minutes : this.minutes) + ':' + (this
					.seconds < 10 ? '0' + this.seconds : this.seconds);
			},
			stop() {
				clearInterval(this.timer)
			},
		}
	};
</script>

<style>
	.timer{
		width: 80px;
		text-align: center;
	}
</style>
